<template>
  <div
    class="popup"
    v-show="showFlag"
    >
      <div class="selSpec-container">
          <div class="close" @click.stop.prevent="showFlag=false">
            <i class="iconfont icon-close1"></i>
          </div>
          <h1>{{food.dishesName}}</h1>
          <div class="goods-image">
            <img v-if="food.imgUrl" :src="food.imgUrl">
            <img v-else src="../../assets/image/nodish.png">
          </div>
          <div style="position:relative;height:70px;overflow:auto;" v-show="food.attribute">
            <div class="acc-lists">
                <label v-for="(attr,index) in food.attribute">
                    <input type="radio" name="acc" :value="attr.itemId" v-model="food.selAttr">
                    <span>{{attr.dishesPropertyItem.itemName}}</span>
                </label>
            </div>
          </div>
          <div class="spec-footer">
              <span class="total">￥{{selAttrPrice}}</span>
              <div class="spec-numCtrl">
                <Numcontrol :food="selFood"></Numcontrol>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  //better-scroll
  import Numcontrol from '../../components/Numcontrol'
  export default {
    props:{
      food: {
        type: Object,
        default:{},
      },
    },
    data() {
      return {
        showFlag: false
      };
    },
    watch:{
      food:{
        handler: function (val, oldVal) {
          let count=0;
          if(val.attribute){
            val.attribute.forEach(function(v) {
              if(v.count){
                count+=v.count;
              }
            });
            this.$set(val,'count',count);
          }
        },
        deep: true
      }
    },
    computed:{
      selAttrPrice(){
        const _this=this;
        if(_this.food.attribute){
          let price = 0;
          _this.food.attribute.forEach(function(val){
            if(val.itemId==_this.food.selAttr){
              return price = val.money;
            }
          });
          return price;
        }else{
          return _this.food.price
        }
      },
      selFood(){
        const _this = this;
        if(_this.food.attribute){
          let sel = _this.food.attribute[0];
          _this.food.attribute.forEach(function(val,index){
            if(val.itemId==_this.food.selAttr){
              sel= _this.food.attribute[index];
            }
          });
          return sel;
        }else{
          return _this.food;
        }
      }
    },
    components:{
      Numcontrol
    }
  }
</script>
<style lang="stylus">
  .popup{
    position: fixed
    top: 0px
    left: 0px
    bottom: 0px
    right: 0px
    z-index: 25
    background: rgba(0,0,0,0.5)
  }
  .selSpec-container
    position: absolute
    top: 12%
    left: 50%
    // -webkit-transform translate(-50%,-50%)
    // transform translate(-50%,-50%)
    padding: 10px;
    width: 280px;
    margin-left:-140px;
    background:#fff
    border-radius: 5px;
    .goods-image
        text-align: center
        margin 10px 0
        min-height:260px
      .spec-footer
        overflow: hidden
        .spec-numCtrl
          float: right
        .total
          float: left
          color: #f86134
          font-size: 18px
          line-height: 39px
          -moz-user-select: -moz-none
          -khtml-user-select: none
          -webkit-user-select: none
          -ms-user-select: none
          user-select: none
      .acc-lists
        position:absolute
        // height:62px
        // overflow-y:auto
        // -webkit-overflow-scrolling: touch
        label
          display: inline-block
          margin: 0 5px 5px 0
          span
            pointer-events: none
          input
            display: none
            &:checked+span
              background: #11bab3
              border-color: #11bab3
              color: #fff
          span
            padding: 5px 10px
            display: block
            border: 1px solid #ccc
            border-radius: 5px
            font-size: 12px
  .selSpec-container .close
    position: absolute;
    top: -12px;
    right: -11px;
    line-height:22px;
    text-align: center
    width: 32px;
    height: 32px
    background: #fff
    border: 3px solid rgba(0,0,0,0.5);
    border-radius: 50%;
    i
      color: rgba(0,0,0,0.5)
      font-size: 24px;
  .selSpec-container h1{
      font-weight: normal;
      font-size: 16px;
  }
</style>